<template>
    <div class="box11">
        <div class="left" :style="{ width: leftWidth }">
            <div class="number">{{ leftNumber1 }}</div>
        </div>
        <div class="right" :style="{ width: rightWidth }">
            <div class="number">{{ rightNumber1 }}</div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'XBox',
};
</script>
<script lang="ts" setup>
import { computed } from '@vue/reactivity';

const props = defineProps({
    leftNumber: {
             type: Number,
             required: true,
        },
    rightNumber:
         {
             type: Number, required: true,
         },
    
    }
)
const leftNumber1 = computed(()=>{
   
    if(isNaN(props.leftNumber)){
      return ""
    }else{
      return props.leftNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    }
})
const rightNumber1 = computed(()=>{
   
   if(isNaN(props.rightNumber)){
     return ""
   }else{
     return props.rightNumber.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
   }
})
const leftWidth = computed(()=>{
    return (props.leftNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
})
const rightWidth = computed(()=>{
   return  (props.rightNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
})


</script>
<style scoped lang="scss">
.box11 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 28px;
    width: 405px;

    @media screen and (max-width: 768px) {
        width: 80vw;
    }
}

.left {
    display: flex;
    align-items: center;
    justify-content: start;
    height: 100%;
    background-color: #ee4040;
    font-weight: bold;
    color: #fff;
    .number {
        z-index: 1;
    }
}
.right {
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
    background-color: #98c2f2;
    font-weight: bold;
    color: #fff;
    .number {
        z-index: 1;
    }
}

/* .left {
    border-radius: 5px 0 0 5px;
}

.right {
    border-radius: 0 5px 5px 0;
} */
</style>

<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1400px) {
    .box11 {
        height: calc(100vw / var(--screen) * 28);
        width: calc(100vw / var(--screen) * 405);
    }
}
</style>